<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String path = request.getContextPath();%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="<%=path%>/static/js/jquery-3.5.1.min.js"></script>
<style>
    #hide{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        background-image: url("<%=path%>/static/web/css/img/overlay.png");
        opacity: 1;
        z-index: 100;
        display: none;
    }
    #hide #mes{
        margin: 0;
        padding: 0;
        width: 40%;
        height: 45%;
        position: absolute;
        left: 30%;
        top: 15%;
        z-index: 120;
        border: #3a3a3a 8px solid;
        background-color: #cccccc;
        overflow: auto;
    }
    #hide #mes #header{
        margin: 0;
        padding: 0;
        background-color:#019875;
        height: 50px;
        z-index: 150;
        color: white;
    }
    #hide #mes #header #but{
        position: relative;
        background-image: url("<%=path%>/static/web/css/img/controls.png");
        width: 30px;
        height: 30px;
        float: right;
        border:#019875 0px solid;
    }
    #hide #mes #header #but:hover{
        cursor: pointer;
    }
    #hide #mes #header #title{
        font-size: 25px;

    }
    #hide #mes div {
        text-align: center;
        margin-top: 10px;
        padding: 0;
        height: 50px;
        z-index: 150;
        color: #0C0C0C;
        font-size: 20px;
    }
    #hide #mes #ok{
        margin-top: 40px;
    }
    #hide #mes #ok input:hover{
        cursor: pointer;
        color: #019875;
    }
</style>
<style>
    #hideing{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        position: fixed;
        background-image: url("<%=path%>/static/web/css/img/overlay.png");
        opacity: 1;
        z-index: 100;
        display: none;
    }
    #hideing #mesg{
        margin: 0;
        padding: 0;
        width: 30%;
        height: 30%;
        position: absolute;
        left: 30%;
        top: 15%;
        z-index: 120;
        border: #3a3a3a 8px solid;
        background-color: #cccccc;
        overflow: auto;
    }
    #hideing #mesg #headers{
        margin: 0;
        padding: 0;
        background-color:#019875;
        height: 50px;
        z-index: 150;
        color: white;
    }
    #hideing #mesg #headers #butt{
        position: relative;
        background-image: url("<%=path%>/static/web/css/img/controls.png");
        width: 30px;
        height: 30px;
        float: right;
        border:#019875 0px solid;
    }
    #hideing #mesg #headers #butt:hover{
        cursor: pointer;
    }
    #hideing #mesg #headers #sub{
        font-size: 25px;

    }
    #hideing #mesg div {
        text-align: center;
        margin-top: 10px;
        padding: 0;
        height: 50px;
        z-index: 150;
        color: #0C0C0C;
        font-size: 20px;
    }
    #hideing #mesg #oks{
        margin-top: 40px;
    }
    #hideing #mesg #oks input:hover{
        cursor: pointer;
        color: #019875;
    }
</style>
<script>
    $(function () {
        var pageNumber = 1;
        var id = null;
        var tagName = null;
        initdate(pageNumber,id,tagName);
        //搜索
        $("#search").click(function () {
            id = $("#wdufui").val();
            tagName = $("#tagName").val();
            initdate(pageNumber,id,tagName);
        });
        //页码
        $(".result-content").on("click",".list-page a",function () {
            pageNumber = $(this).data("pagenum");
            initdate(pageNumber,id,tagName);
        });
    });
    //初始化
    function initdate(pageNumber,id,tagName) {
        $.ajax({
            url:"<%=path%>/manage/tags/date",
            data:{pageNumber:pageNumber,id:id,tagName:tagName},
            success:function (resource) {
                $(".result-content").html(resource);
            }
        });
    }
    //添加
    $(function () {
        $("#but").click(function () {
            $("#hide").css("display","none");
        });
        $("#addTags").click(function () {
            $("#hide").css("display","block");
        });
        $("#button").click(function () {
            var parentId = $("#parentId").val();
            var tagName = $("#setUp").val();
            if (tagName==""){
                return;
            }
            $.get("<%=path%>/manage/tags/insert",{tagName:tagName,id:parentId},function () {
                $("#hide").css("display","none");
            });
        });
    });
    //修改标签名
    $(function () {
        var id = "";
        var tagsName = "";
        $(".result-content").on("click",".link-update",function () {
            id = $(this).attr("id");
            tagsName = $(this).parent().prev().prev().prev().html();
            $("#setResume").val(tagsName);
           $("#hideing").css("display","block");
        });
        $("#butt").click(function () {
            $("#hideing").css("display","none");
        });
        $("#buttons").click(function () {
            var tagName = $("#setResume").val();
            if (tagName==""){
                return;
            }
            $.get("<%=path%>/manage/tags/update",{tagName:tagName,id:id},function () {
                $("#hideing").css("display","none");
                location.reload();
            });
        });
    });
    //删除
    $(function () {
        $(".result-content").on("click",".link-del",function () {
            var id = $(this).attr("id");
            $.get("<%=path%>/manage/tags/del",{id:id},function () {
                $(this).parent().parent().remove();
                $("#hideing").css("display","none");
            }.bind(this));
        });
    });
    //全选
    $(function () {
        batchDel();
        $(".result-content").on("click",".allChoose",function () {
            $(":checkbox[id=choose]").prop("checked",$(this).prop("checked"));
        });
        function batchDel() {
            $("#batchDel").click(function () {
                var idArr = new Array();
                $(":checked[id='choose']").each(function () {
                    idArr.push($(this).val());
                });
                if (idArr.length>0){
                    $.get("<%=path%>/manage/tags/batchDel",{idArr:idArr.toString()},function () {
                        for(var i=0;i<idArr.length;i++){
                            if ( $(":checked[id='choose']").val()==idArr[i]){
                                $(":checked[id='choose']").parent().parent().remove();
                            }
                        }
                    });
                }
            });
        }
    });
</script>
<div id="hide">
    <div id="mes">
        <div id="header">
            <span id="title">添加标签</span>
            <button id="but"></button>
        </div>
        <div>
            <span>所属类型:&nbsp;</span>
            <select style="width: 190px;height: 30px" id="parentId">
                <c:forEach items="${requestScope.tags}" var="tag">
                    <option value="${tag.id}">${tag.tagName}</option>
                </c:forEach>
            </select>
        </div>
        <div id="like">
            <span>标签名称:&nbsp;</span>
            <input type="text" id="setUp">
        </div>
        <div id="ok">
            <span style="margin-left: 10px">
                <input type="button" id="button" style="font-size: 20px" value="添加">
            </span>
        </div>
    </div>
</div>
<div id="hideing">
    <div id="mesg">
        <div id="headers">
            <span id="sub">修改标签</span>
            <button id="butt"></button>
        </div>
        <div id="likes">
            <span>标签名称:&nbsp;</span>
            <input type="text" id="setResume">
        </div>
        <div id="oks">
            <span style="margin-left: 10px">
                <input type="button" id="buttons" style="font-size: 20px" value="确定">
            </span>
        </div>
    </div>
</div>
<jsp:include page="/manage/inc/header"/>
<jsp:include page="/manage/inc/menu"/>
    <!--/sidebar-->
    <div class="main-wrap">

        <div class="crumb-wrap">
            <div class="crumb-list"><i class="icon-font"></i><a href="<%=path%>/manage/index">首页</a><span class="crumb-step">&gt;</span><span class="crumb-name">标签管理</span></div>
        </div>
        <div class="search-wrap">
            <div class="search-content">
                <table class="search-tab">
                    <tr>
                        <th width="120">选择分类:</th>
                        <td>
                            <select name="search-sort" id="wdufui">
                                <option value="">全部</option>
                                <c:forEach items="${requestScope.tags}" var="tag">
                                    <option value="${tag.id}">${tag.tagName}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <th width="70">关键字:</th>
                        <td><input class="common-text" placeholder="关键字" id="tagName" type="text"></td>
                        <td><input class="btn btn-primary btn2" id="search" value="查询" type="button"></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="result-wrap">

                <div class="result-title">
                    <div class="result-list">
                        <a href="#" id="addTags"><i class="icon-font"></i>新增标签</a>
                        <a id="batchDel" href="javascript:void(0)"><i class="icon-font"></i>批量删除</a>
                    </div>
                </div>
            <div class="result-content">

            </div>

        </div>
    </div>
    <!--/main-->
</div>
<jsp:include page="/manage/inc/footer"/>
